<template>
  <page>
    <!-- <div slot="top">
      <el-form>
        <el-form-item label="状态" size="small">
          <el-select v-model="status" placeholder="请选择" clearable>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button type="primary" class="btn-query" @click="getTableData(1)">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <div slot="body">
      <el-tabs v-model="status" @tab-click="changeTab" type="card">
        <el-tab-pane key="0" label="未完成" name="0"> </el-tab-pane>
        <el-tab-pane key="1" label="已完成" name="1"> </el-tab-pane>
      </el-tabs>
      <div class="table-operation">
        <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd()"> 新增生产单 </el-button>
      </div>
      <el-table :data="tableData" border>
        <el-table-column label="序号" align="center" type="index" width="50px"></el-table-column>
        <el-table-column
          label="生产单编号"
          prop="taskCode"
          align="center"
          width="150px"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="产品ID"
          prop="prodCode"
          align="center"
          width="150px"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="所属隧道"
          prop="tunnel"
          align="center"
          width="150px"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="隧道部位" prop="tunnelArea" align="center" width="100px">
          <template slot-scope="scope">
            <span>{{
              (tunnelPartsOptions.find(item => item.dictValue == scope.row.tunnelArea) || {}).dictLabel ||
              scope.row.tunnelArea
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="工字钢类型" prop="steel" align="center" width="100px"></el-table-column>
        <el-table-column label="单元" prop="unit" align="center" width="100px">
          <template slot-scope="scope">
            <span>{{
              (unitOptions.find(item => item.dictValue == scope.row.unit) || {}).dictLabel ||
              scope.row.tunnelArea
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="计划产量" prop="planNum" align="center" width="100px"></el-table-column>
        <el-table-column label="生产批次" prop="batchCode" align="center" width="150px" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              style="overflow: hidden; display: inline-block; text-overflow: ellipsis; width: 140px"
              @click="toPageRecord(scope.row)"
            >
              {{ scope.row.batchCode }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="已完成产量" prop="finishNum" align="center" width="100px"></el-table-column>
<!--        <el-table-column label="创建人" prop="createBy" align="center" width="100px"></el-table-column>-->
        <el-table-column label="创建时间" prop="createTime" align="center" width="160px"></el-table-column>
        <el-table-column label="状态" prop="status" align="center" width="100px">
          <template slot-scope="scope">
            <div v-if="scope.row.status==0">未完成</div>
            <div v-if="scope.row.status==1">已完成</div>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          prop="remark"
          align="center"
          width="250px"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="最新建议冷弯数据"
          prop="suggest"
          align="center"
          width="250px"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="80px">
          <template slot-scope="scope">
            <el-link type="primary" :underline="false" @click="editRow(scope.row)">编辑 </el-link>
          </template>
        </el-table-column>
        <empty slot="empty"></empty>
      </el-table>
    </div>
    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="open" @close="closeHandle" width="800px" append-to-body>
      <el-table :data="prodList" border>
        <el-table-column label="序号" type="index" width="50px"></el-table-column>
        <el-table-column label="产品ID" prop="prodCode" show-overflow-tooltip></el-table-column>
        <el-table-column label="所属隧道" prop="tunnel"></el-table-column>
        <el-table-column label="隧道部位" prop="tunnelArea">
          <template slot-scope="scope">
            <span>{{
              (tunnelPartsOptions.find(item => item.dictValue == scope.row.tunnelArea) || {}).dictLabel ||
              scope.row.tunnelArea
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="工字钢类型" prop="steel"></el-table-column>
        <el-table-column label="单元" prop="unit">
          <template slot-scope="scope">
            <span>{{
              (unitOptions.find(item => item.dictValue == scope.row.unit) || {}).dictLabel ||
              scope.row.unit
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px">
          <template slot-scope="scope">
            <el-radio
              v-model="radio"
              :label="scope.row.id"
              @change="handleSelectionChange(scope.row.id)"
              >{{
            }}</el-radio>
          </template>
        </el-table-column>
      </el-table>
      <el-form ref="form" :model="form" class="form" :rules="rules" label-width="120px">
        <el-form-item label="生产单编号">
          <el-input v-model="prodCode" disabled />
        </el-form-item>
        <el-form-item label="计划产量" prop="planNum">
          <el-input v-model="form.planNum" placeholder="请输入计划产量" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="6" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>
    <div slot="footer">
      <el-pagination
        background
        :page-size="pageVO.pageSize"
        :current-page.sync="pageVO.pageNum"
        :total="pageVO.total"
        :layout="pageOptions.layout"
        :page-sizes="pageOptions.pageSizes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </page>
</template>
<script>
import { getDicts as getDictsAPI } from '@/api/records';
import { getList, getProd, addProd, editProd } from '@/api/produce';
import pageQuery from '../../mixins/pageQuery';
export default {
  mixins: [pageQuery],
  data() {
    return {
      status: '0',
      tableData: [],
      prodList: [],
      title: '',
      open: false,
      form: {
        planNum: '',
        remark: '',
      },
      prodCode: '',
      pageVO: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      radio: '',
      prodIdList: [],
      tunnelPartsOptions: [],
      unitOptions: [],
      rules: {
        planNum: [{ required: true, message: '计划产量不能为空', trigger: 'blur' }],
      },
    };
  },
  created() {
    this.getDicts();
    this.getTableData(1, this.status);
  },
  methods: {
    getDicts() {
      getDictsAPI({ dictType: 'sys_tunnel_area' }).then(res => {
        console.log('res', res.data.data)
        this.tunnelPartsOptions = res.data.data;
      });
      getDictsAPI({ dictType: 'sys_prod_unit' }).then(res => {
        this.unitOptions = res.data.data;
      });
    },
    closeHandle() {
      this.$refs.form.resetFields();
      this.prodCode = '';
      this.form = {
        planNum: '',
        remark: '',
      };
      this.open = false;
    },
    toPageRecord(row) {
      this.$router.push({
        path: '/produce-records',
        query: {
          taskCode: row.taskCode,
        },
      });
    },
    getTableData(pageNum, status) {
      const { projectId } = this.$store.getters;
      const parmars = {
        pageNo: this.pageVO.pageNum,
        pageSize: this.pageVO.pageSize,
        projectId: projectId,
        status: status,
      };
      if (pageNum) {
        this.pageVO.pageNum = pageNum;
      }
      getList(parmars).then(res => {
        this.tableData = res.data.data;
        this.pageVO.total = res.data.total;
      });
      const parmas = {
        projectId: projectId,
      };
      getProd(parmas).then(res => {
        this.prodList = res.data;
      });
    },
    changeTab(item) {
      this.getTableData(1, item.index);
    },
    handleAdd() {
      this.open = true;
      this.title = '新增生产单';
    },
    editRow(row) {
      this.open = true;
      this.prodCode = row.taskCode;
      this.title = '编辑生产单';
      this.form = row;
    },
    handleSelectionChange(val) {
      this.form.prodId = val;
    },
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id) {
            editProd(this.form).then(res => {
              this.$message.success('编辑生产单成功');
              this.open = false;
              this.getTableData();
            });
          } else {
            addProd(this.form).then(res => {
              this.$message.success('新增生产单成功');
              this.open = false;
              this.getTableData();
            });
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.btn-query {
  margin-left: 10px;
}
.form {
  margin-top: 20px;
}
</style>
